<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">

	//核心函数的4个作用
	//传入参数为[函数]时：在文档加载完成后执行这个函数
    $(function () {
        alert("页面加载完成之后，自动调用");

        //传入参数为[HTML字符串]时：根据这个字符串创建元素节点对象
        $("    <div>\n" +
            "        <span>div-span1</span>\n" +
            "        <span>div-span2</span>\n" +
            "    </div>").appendTo("body");

        //传入参数为[选择器字符串]时：根据这个字符串查找元素节点对象
        alert($("button").length);

        //传入参数为[DOM对象]时：将DOM对象包装为jQuery对象返回
        let btnObj = document.getElementById("btn01");
        alert(btnObj);//[object HTMLButtonElement]
        alert($(btnObj));//[object Object]
    });

</script>
</head>
<body>
    <button id="btn01">按钮一</button>
    <button>按钮二</button>
    <button>按钮三</button>
    <button>按钮四</button>
</body>
</html>